<!-- enterpriseQuantityStatistics 企业数量统计-->
<template>
  <div class='enterpriseQuantityStatistics'>
    <!-- 头部 -->
    <echartsHeader title="企业数量统计" />
    <br />
    <div class="contents">

      <el-form label-position="right">
        <selectOption labelTitle="日期范围:">
          <el-date-picker v-model="query.dataValue" type="daterange" :appendToBody="false"
            value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </selectOption>

        <selectOption labelTitle="区县:">
          <QXSelect :value="query.area" @parentEvent="getQXChild" ref="QXDome"></QXSelect>
        </selectOption>

        <selectOption labelTitle="行业:">
          <HYSelect :value="query.tradeArr" @parentEvent="getHYChild" ref="HYDome" :type="0"></HYSelect>
        </selectOption>

        <selectOption labelTitle="性质:">
          <XZSelect :value="query.nature" @parentEvent="getXZChild" ref="XZDome"></XZSelect>
        </selectOption>

        <selectOption labelTitle="规模:">
          <GMSelect :value="query.scale" @parentEvent="getGMChild" ref="GMDome"></GMSelect>
        </selectOption>

        <selectOption labelTitle=" " class="btn resize">
          <el-button type="primary" @click="searchQuery">查询</el-button>
        </selectOption>

        <selectOption labelTitle=" " class="btn resize">
          <el-button type="primary" @click="resize">重置</el-button>
        </selectOption>
      </el-form>

      <!-- 图表1 -->
      <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="注册量">
              <!-- id不要重复 -->
              <div id="ec_1"></div>
            </blockContent>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="审核数量">
              <!-- id不要重复 -->
              <div id="ec_2"></div>
            </blockContent>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="发布职位">
              <!-- id不要重复 -->
              <div id="ec_3"></div>
            </blockContent>
          </div>
        </el-col>
      </el-row>
      <br />
      <el-row :gutter="20" type="flex" class="row-bg" justify="space-around">
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="面试邀请">
              <!-- id不要重复 -->
              <div id="ec_4"></div>
            </blockContent>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <!-- 内容+图表 -->
            <blockContent title="发起聊天">
              <!-- id不要重复 -->
              <div id="ec_5"></div>
            </blockContent>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// 引入封装插件，需求不够跟我说
import { MyEcharts } from '@/components/page/DataCenter/utils/echart-utils'
import bus from '@/components/common/bus';
import { companyDailyCount, companyauthDailyCount, companyInterviewCount, chartCompany, jobCountChart } from '@/api/enterpriseQuantityStatistics';
export default {
  components: {},
  data () {
    return {
      query: {
        dataValue: '',
        // 行业
        tradeArr: '',
        // 开始时间
        area: '',
        beginTime: '',
        // 结束时间
        offTime: '',
        startTime: '',
        endTime: '',
        currentResidence: '',
        dateCondition: 1,
        scale: '',
        nature: '',
        trade: '',
        startCreateTime: '',
        endCreateTime: ''
      },
      // 注册量
      jobCountChartCounts: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
      // 注册量
      companyDailyCounts: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
      // 审核量
      companyauthDailyCounts: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
      // 面试邀请
      companyInterviewCounts: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
      // 发起聊天
      chartCompanyCounts: {
        legend: [],
        xAxis: [],
        series: [
          {
            itemStyle: {
              normal: {
                color: '#3856ae', //改变折线点的颜色
                lineStyle: {
                  color: '#3856ae' //改变折线颜色
                }
              }
            },
            name: '数量',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    optionChart () {
      let option_pie = MyEcharts.EchartsOption.Line('', '', this.companyDailyCounts)
      MyEcharts.initChart(option_pie, 'ec_1')
      let option_pie2 = MyEcharts.EchartsOption.Line('', '', this.companyauthDailyCounts)
      MyEcharts.initChart(option_pie2, 'ec_2')

      let option_pie3 = MyEcharts.EchartsOption.Line('', '', this.jobCountChartCounts)
      MyEcharts.initChart(option_pie3, 'ec_3')

      let option_pie4 = MyEcharts.EchartsOption.Line('', '', this.companyInterviewCounts)
      MyEcharts.initChart(option_pie4, 'ec_4')

      let option_pie5 = MyEcharts.EchartsOption.Line('', '', this.chartCompanyCounts)
      MyEcharts.initChart(option_pie5, 'ec_5')
    },
    // 对查询条件进行搜索
    searchQuery () {
      console.log(this.query)
      this.query.beginTime = this.query.dataValue[0]
      this.query.offTime = this.query.dataValue[1]
      this.query.startTime = this.query.dataValue[0]
      this.query.endTime = this.query.dataValue[1]
      this.query.startCreateTime = this.query.dataValue[0]
      this.query.endCreateTime = this.query.dataValue[1]
      this.companyDailyCount()
      this.companyauthDailyCount()
      this.companyInterviewCount()
      this.chartCompanyCountsCount()
      this.jobCountChartCount()
    },
    // 企业数量统计
    companyDailyCount () {
      let trade = this.query.tradeArr
      if (trade) {
        if (typeof (trade) == "string") {
          this.query.trade = trade
        } else {
          this.query.trade = JSON.stringify(trade)
        }
      }
      companyDailyCount(this.query).then(res => {
        if (res.success) {
          console.log(res.data, 'data')
          this.companyDailyCounts.xAxis = res.data.dailyDateList
          this.companyDailyCounts.series[0].data = res.data.dailyCountList
          this.optionChart()
        }
      })
    },
    // 审核数量统计
    companyauthDailyCount () {
      let trade = this.query.tradeArr
      if (trade) {
        if (typeof (trade) == "string") {
          this.query.trade = trade
        } else {
          this.query.trade = JSON.stringify(trade)
        }
      }
      companyauthDailyCount(this.query).then(res => {
        if (res.success) {
          this.companyauthDailyCounts.xAxis = res.data.dailyDateList
          this.companyauthDailyCounts.series[0].data = res.data.dailyCountList
          this.optionChart()
        }
      })
    },
    // 企业数量统计（邀请面试）返回数据格式不对，暂不给予调试
    companyInterviewCount () {
      let trade = this.query.tradeArr
      if (trade) {
        if (typeof (trade) == "string") {
          this.query.trade = trade
        } else {
          this.query.trade = JSON.stringify(trade)
        }
      }
      companyInterviewCount(this.query).then(res => {
        if (res.success) {
          console.log(res.data, '企业数量统计（邀请面试）')
          this.companyInterviewCounts.xAxis = res.data.interviewTime
          this.companyInterviewCounts.series[0].data = res.data.interviewCount
          this.optionChart()
        }
      })
    },
    // 聊天
    chartCompanyCountsCount () {
      let trade = this.query.tradeArr
      if (trade) {
        if (typeof (trade) == "string") {
          this.query.trade = trade
        } else {
          this.query.trade = JSON.stringify(trade)
        }
      }
      chartCompany(this.query).then(res => {
        if (res.success) {
          this.chartCompanyCounts.xAxis = res.data.date.reverse()
          this.chartCompanyCounts.series[0].data = res.data.count.reverse()
          this.optionChart()
        }
      })
    },
    // 发布职位
    jobCountChartCount () {
      let trade = this.query.tradeArr
      if (trade) {
        if (typeof (trade) == "string") {
          this.query.trade = trade
        } else {
          this.query.trade = JSON.stringify(trade)
        }
      }
      jobCountChart(this.query).then(res => {
        if (res.success) {
          this.jobCountChartCounts.xAxis = res.data.date.reverse()
          this.jobCountChartCounts.series[0].data = res.data.count.reverse()
          this.optionChart()
        }
      })
    },
    // 重置
    resize () {
      this.query = {
        dateCondition: 1
      }
      // 调用子组件的方法，清空选中的行业【清空时必须分别清空】
      this.$refs.QXDome.clearContent();
      this.$refs.HYDome.clearContent();
      this.$refs.XZDome.clearContent();
      this.$refs.GMDome.clearContent();
      // 企业数量统计
      this.companyDailyCount()
      // 审核数量统计
      this.companyauthDailyCount()
      // 企业数量统计（邀请面试）
      this.companyInterviewCount()
      // 发起聊天
      this.chartCompanyCountsCount()
      this.jobCountChartCount()
    },
    // <<< -------------------------- 子组件派发过来的事件 ------------------------------>>>
    // 获取行业子组件传过来的行业数据
    getHYChild (val) {
      this.query.tradeArr = val;
    },
    // 获取区县子组件传过来的区县数据
    getQXChild (val) {
      this.query.area = val;
      this.query.currentResidence = val
    },
    // 获取区县子组件传过来的性质数据
    getXZChild (val) {
      this.query.nature = val;
    },
    // 获取区县子组件传过来的规模数据
    getGMChild (val) {
      this.query.scale = val;
    }
  },
  created () {
    bus.$on('optionPiesSize', msg => {
      this.optionChart()
    });
    // 企业数量统计（邀请面试）
    this.companyInterviewCount()
    // 企业数量统计
    this.companyDailyCount()
    // 审核数量统计
    this.companyauthDailyCount()
    // 发起聊天
    this.chartCompanyCountsCount()
    this.jobCountChartCount()

    setTimeout(() => {
      this.optionChart()
    }, 2000)
  },
  mounted () {
    // 为了模拟数据返回等待的时间，同时也是为了更好的初始化实例

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.enterpriseQuantityStatistics {
    background: #080850;
}
.contents {
    width: 96%;
    margin: 0 auto;
}

.btn {
    width: 100px;
}
.btn /deep/ .el-form-item__label {
    min-width: 20px !important;
}

#ec_1 {
    min-height: 270px;
}

#ec_2 {
    min-height: 270px;
}

#ec_3 {
    min-height: 270px;
}

#ec_4 {
    min-height: 270px;
}

#ec_5 {
    min-height: 270px;
}
</style>